<template>
	<view class="intermediary" >
		<view class="intermediary_nav" :style="{'paddingTop':StatusBar + 'px'}">
			<view class="nav_back" @click="navigateBack()">
				<text class="iconfont icon-Left"></text>
			</view>
			<view class="nav_title">中介担保</view>
			<view class="nav_tips">
				是指买家和卖家通过线下联系
				对账号情况以及出售金额达成
				共识，找平台担保交易
			</view>
		</view>
		<view class="intermediary_list">
			<view class="list_number">
				<view class="number_title">收费标准</view>
				<view class="number_box">
					<view class="box_item">
						<view class="item_head">普通中介</view>
						<view class="item_tips">
							<view class="tips_content">
								<text>
									平台只保障交易过程中的资金安全，一旦放款
									后，出现封号、找回、冻结等账号风险问题，
									平台不承担任何责任
								</text>
								
							</view>
						</view>
					</view>
					<view class="box_item">
						<view class="item_head">包赔中介</view>
						<view class="item_tips">
							<view class="tips_content">
								<text>
									平台负责保障账号交易过程中以及交易完成后
									的安全问题，如出现账号被找回等情况，平台
									负责7日内追回该账号，如账号内未追回，平
									台全额赔付买家购买金额
								</text>
								
							</view>
						</view>
					</view>
					<view class="box_item">
						<view class="item_head">充值包赔</view>
						<view class="item_tips">
							<view class="tips_content">
								<text>
									在基于普通包赔的基础上，如买家对购买账号
									出现充值后被找回的情况，平台则按照充值记
									录对买家进行赔付，上限为号价250%
								</text>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list_title">联系客服</view>
			<view class="list_item" v-for="item in 30">
				<view class="item_image">
					<image src="../../static/buy/yjwj.png" mode=""></image>
				</view>
				<view class="item_bottom">
					<view class="bottom_name">永劫无间</view>
					<view class="bottom_btn">联系客服</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
.intermediary {
	height: 100vh;
	display: flex;
	flex-direction: column;
	.intermediary_nav {
		width: 100%;
		height: 456rpx;
		background: url(~@/static/intermediary/zjdb.png) no-repeat;
		background-size: 100%;
		.nav_back {
			margin: 40rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #FFD026;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			.iconfont {
				margin-left: -4rpx;
			}
		}
		.nav_title {
			margin: 14rpx 0 0 36rpx;
			font-size: 44rpx;
			font-weight: bold;
			background: -webkit-linear-gradient(90deg, #FF1D1D, #FF902A);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.nav_tips {
			margin-top: 4rpx;
			margin-left: 36rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #A2301E;
			width: 456rpx;
		}
	}
	.intermediary_list {
		z-index: 999;
		background: #fff;
		margin-top: -62rpx;
		flex: 1;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.list_number {
			.number_title {
				padding-bottom: 20rpx ;
				font-size: 32rpx;
				font-weight: bold;
				color: #22150B;
			}
			.number_box {
				.box_item {
					width: 100%;
					background: #FFE78F;
					border-radius: 20rpx 60rpx 20rpx 20rpx;
					overflow: hidden;
					margin-bottom: 16rpx;
					&:nth-child(1) {
						.item_tips {
							.tips_content {
								background: url(@/static/intermediary/hj1.png) top right no-repeat;
								background-size: 164rpx 158rpx;
							}
						}
					}
					&:nth-child(2) {
						.item_tips {
							.tips_content {
								background: url(@/static/intermediary/hj2.png) top right no-repeat;
								background-size: 164rpx 158rpx;
							}
						}
					}
					&:nth-child(3) {
						.item_tips {
							.tips_content {
								background: url(@/static/intermediary/hj3.png) top right no-repeat;
								background-size: 164rpx 158rpx;
							}
						}
					}
					.item_head {
						box-sizing: border-box;
						padding: 12rpx 24rpx;
						font-size: 28rpx;
						color: #22150B;
						font-weight: bold;
					}
					.item_tips {
						
						background: linear-gradient( 180deg, #FFFFFF 0%, #FFF8E5 100%);
						border: 4rpx solid #FBEAC0;
						border-radius: 20rpx 60rpx 20rpx 20rpx;
						.tips_content {
							padding: 28rpx 24rpx;
							
							
							text {
								display: inline-block;
								width: 480rpx;
								font-size: 24rpx;
								color: #6C6C6C;
							}
						}
					}
				}
			}
		}
		.list_title {
			padding-bottom: 20rpx ;
			font-size: 32rpx;
			font-weight: bold;
			color: #22150B;
		}
		.list_item {
			float: left;
			width: 332rpx;
			height: 232rpx;
			background: #FFE78F;
			border-radius: 28rpx;
			box-sizing: border-box;
			padding: 12rpx 12rpx 0;
			margin-bottom: 16rpx;
			&:nth-child(2n) {
				margin-left: 22rpx;
			}
			.item_image {
				width: 100%;
				height: 168rpx;
				overflow: hidden;
				border-radius: 24rpx;
				border: 4rpx solid #FFEBAE;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item_bottom {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 6rpx 16rpx 0 10rpx;
				.bottom_name {
					font-size: 20rpx;
					color: #22150B;
					font-weight: bold;
				}
				.bottom_btn {
					width: 132rpx;
					height: 40rpx;
					background: rgba(255,255,255,0.5);
					border-radius: 60rpx;
					font-size: 24rpx;
					color: #FF8801;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: auto;
				}
			}
		}
	}
}

</style>
